@extends('admin.layouts.master')

@section('pagecss')
<link rel="stylesheet" type="text/css" href="/admin/assets/bootstrap-datepicker/css/datepicker.css" />
@endsection

@section('content')

<div class="row aw-list">
	<div class="col-lg-12">
		<section class="panel aw-content">
			<header class="panel-heading">场地列表</header>
			<div class="aw-mt20 overflow-hidden">
				<div class="col-sm-6 col-md-3 form-group overflow-hidden">
					<div class="col-xs-4 aw-p0 aw-list-input-title">店面：</div>
					<div class="col-xs-8 aw-p0">
						<select placeholder="请选择店面" id="store_id" name="store_id" v-model="form.store_id" :value="form.store_id" class="form-control">
							<option value="0">全部</option>
							<option v-for="(list,key) in list_store" :value="list.id">@{{list.store_name}}</option>
						</select>
					</div>
				</div>
				<div class="col-sm-6 col-md-3 form-group overflow-hidden">
					<div class="col-xs-4 aw-p0 aw-list-input-title">场地类型：</div>
					<div class="col-xs-8 aw-p0">
						<select placeholder="请选择场地类型" id="type" name="type" v-model="form.type" :value="form.type" class="form-control">
							<option value="0">全部</option>
							<option v-for="(list,key) in list_type" :value="list.id">@{{list.type_text}}</option>
						</select>
					</div>
				</div>
				
				<div class="col-sm-6 col-md-3 form-group overflow-hidden">
					<div class="col-xs-4 aw-p0 aw-list-input-title">设置时间：</div>
					<div class="col-xs-8 aw-p0">
						<input type="text" placeholder="请选择时间" id="date" name="date" v-model="form.date" :value="form.date" class="form-control">
					</div>
				</div>
				<div class="col-sm-6 col-md-3 form-group overflow-hidden">
					<a v-on:click="List_Search()" class="btn btn-green" href="javascript:;"><i class="icon-search"></i> 搜索</a>
					<a href="/admin/field/list?page_id=23" class="btn btn-gray"><i class="icon-refresh"></i> 重置</a>
				</div>
				<div class="col-sm-8 form-group overflow-hidden">
					<a href="/admin/field/currency-price?page_id=25" class="btn btn-gules"><i class="icon-money"></i> 通用价格设置</a>
					<a href="/admin/field/temporary-price?page_id=26" class="btn btn-gules"><i class="icon-money"></i> 临时价格调整</a>
				{{--	<a href="/admin/field/lock?page_id=27" class="btn btn-gules"><i class="icon-unlock-alt"></i> 锁定场地</a>--}}
				</div>
				<div class="col-sm-4 form-group overflow-hidden aw-text-right">
					<a href="/admin/field/calendar?page_id=24" class="btn btn-gules"><i class="icon-calendar"></i> 日历浏览模式</a>
				</div>
			</div>
			<div v-for="(list,key) in lists">
			<header class="panel-heading">@{{list.store_name}} <span v-if="list.program==1">规则一 07:00开始规则</span><span v-if="list.program==2">规则二 08:00开始规则</span></header>
			<ul class="overflow-hidden aw-field-list">
				<li class="col-sm-4 col-md-3 aw-field-list-li" v-for="(li,key) in list.list_field">
					<div class="aw-field-li">
						<p>@{{list.store_name}} </p>
						<p>@{{li.type_text}}</p>
						<p>@{{li.number}}号场地</p>
						<p>规则@{{li.program}}</p>
						<div class="progress progress-striped active progress-lg">
                            <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" :style="'width:'+li.percent+'%'">
                                <span>@{{li.percent}}%</span>
                            </div>
                        </div>
						<a class="btn btn-blue btn-xs" :href="'/admin/field/info?page_id=23&id='+li.id+'&time='+form.date">
							<i class="icon-file-text-alt"></i>
						</a>
						<a class="btn btn-gules btn-xs" href="javascript:;" v-on:click="List_Del(li.id,li.type_text,li.number,list.store_name)">
							<i class="icon-trash"></i>
						</a>
					</div>
				</li>
			</ul>
			</div>
			<div class="aw-text-center aw-list-null" v-if="lists.length==0">暂无场地</div>
		</section>
	</div>
</div>

@section('pagejs')
@parent

<!--日期插件-->
<script type="text/javascript" src="/admin/js/ga.js"></script>
<script type="text/javascript" src="/admin/assets/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>

<script type="text/javascript" src="/admin/js/page.js"></script>
<script type="text/javascript">
var MJS_URLArry=URLArry;
var Get_form={
	page_id:23,type:0,store_id:0,date:DateToday(),
}
$.extend(Get_form,MJS_URLArry);
Get_form.page_num=1000;
var AD_list={
	api:'/adminapi/field/manage',
	form_data:Get_form,
	tips:false,
}
var AD_list_store={
	api:'/adminapi/storefront/list',
	form_data:{page_num:100},
	tips:false,
}
var Ajax_Vue_Fun_Store=function(vue_data){
	console.log('Data_Vue')
	var Data_Vue={
		lists:{},
		list_store:vue_data.list,
		list_type:Data_field_type_list,
		form:Get_form,
	}
	vm=new Vue({
		el:'#Vue-Body',
		data:Data_Vue,
		methods:{
			List_Search:function(){
				AD_list.form_data=vm.form;
				getData(AD_list,Ajax_Vue_Fun)
				URL_Make(vm.form)
			},List_Del:function(id,type,num,name){
				var tisp='删除 ['+name+'-'+type+'-'+num+'号'+'] 场地';
				var AD_del={
					api:'/adminapi/field/del',
					form_data:{id:id},
					tips:tisp+'成功',
					msg:'是否'+tisp+'？',
				}
				Vm_List_Status(AD_del,1)
			}
		},watch:{
	        'form.store_id':function(val,oldval){
	            console.log('门店改变')
	            console.log(val,oldval)
	            this.List_Search()
	        },'form.type':function(val,oldval){
	            console.log('球场类型改变')
	            console.log(val,oldval)
	            this.List_Search()
	        },'form.date':function(val,oldval){
	            console.log('时间改变')
	            console.log(val,oldval)
	            this.List_Search()
	        }
    	}	
	})
//	if(!Get_form.type){
//		vm.form.store_id=$('#store_id option:eq(0)').val()
//		vm.form.type=$('#type option:eq(0)').val()
//	}
	$('#date').datepicker({
	    format:'yyyy-mm-dd',
	}).on('changeDate',Select_Date);
	function Select_Date(ev){
		var This_day=ev.date.getFullYear().toString() + "-"+ (ev.date.getMonth()+1).toString()+ "-"+ ev.date.getDate().toString()
		vm.form.date=This_day;
		$('#date').val(This_day)
		$('#date').blur()
    }
    vm.List_Search()
}
var Ajax_Vue_Fun=function(vue_data){
	vm.lists=vue_data.list;
}
getData(AD_list_store,Ajax_Vue_Fun_Store)
</script>
@endsection

@endsection

